<template>
  <div id="addGame" style="width: 100%;padding: 20px">
    <el-form :model="gameForm">
      <div id="gameImg"><span v-if="!gameForm.gameImg">添加海报链接后显示</span><img v-if="gameForm.gameImg" :src="gameForm.gameImg" alt="" style="width: 100%;height: 100%"></div>
      <p>游戏名</p>
      <input type="text" v-model="gameForm.gameName" class="input-100">
      <p>游戏海报</p>
      <input type="text"  v-model="gameForm.gameImg" class="input-100">
      <p>游戏英文名</p>
      <input type="text" v-model="gameForm.gameNameEn" class="input-100">
      <p>标签</p>
      <input type="text" v-model="gameForm.gameTags" class="input-100">
    </el-form>
    <button class="button button-color-white" @click="addNewGame">添加</button>
  </div>

</template>

<script>
    export default {
        name: "addGame",
      data(){
        return{
          gameForm:{
            gameName: '',
            gameNameEn:'',
            gameImg:'',
            gameTags:'',
          }
        }
      },
      methods:{
        async addNewGame(){
          const {data:res} = await this.$axios.post('v1/addGame',this.gameForm)
          if(res.code === 200){
            this.$message.success("添加成功")
          }
        }
      }


    }
</script>

<style lang="less" scoped>
  #addGame{
    background-color: var(--theme-bgColor-aside-nav);
  p{
    margin-bottom: 5px;
    color: var(--theme-fontMain);
  }
  input{
    margin-bottom: 20px;
  }
  button{
    margin-top: 50px;
  }
  #gameImg{
    width: 170px;
    height: 238px;
    background-color: var(--theme-button);
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    overflow: hidden;
    color: var(--theme-fontMain);
  }
  }

</style>
